import './App.css';
import {useState} from "react";

const fags =[
  {
    title:"where are these chairs assecbled?",
    text:"lorem ipsum dolor sit amet consectetur"
  },
  {
    title:"How long do I have to return my chair",
    text:"Pariatur recusandae dignissimo,lorem ipsum dolor sit amet consectetur"
  },
  {
    title:"Do you ship to countries outside the EU?",
    text:"Excepturi velit laborum, orem ipsum dolor sit amet consectetur"
  }
]


function App() {
  return (
    <div className="App">
      <Accordion data={fags}/>
    </div>
  );
}

function Accordion({data}){
    const [curOpen,setCurOpen] = useState(null);

  return(
      <div className={"accordion"}>
        {
          data.map((el,i)=>(
              <AccordionItem
                  curOpen = { curOpen }
                  onOpen = { setCurOpen }
                  title={el.title}
                  num ={ i }
                  key ={ i }
              >
                  { el.text }
              </AccordionItem>
              ))
        }
          <AccordionItem
              curOpen = { curOpen }
              onOpen = { setCurOpen }
              title="Test One"
              num ={ 22 }
              key ="Test 1"
          >
              <p>Allows React developers to:</p>
              <ul>
                  <li>Break up UI</li>
                  <li>Make components</li>
                  <li>Place state</li>
              </ul>
          </AccordionItem>
      </div>
  )
}

function AccordionItem({num,title,curOpen,onOpen,children}){
    const isOpen = num === curOpen;

    function handleToggle(){
        onOpen(isOpen ? null : num);
    }


  return (
    <div className={`item ${isOpen ? "open":""}`} onClick={handleToggle}>
      <p className={"number"}>
        {
            num < 9 ? `0${num + 1}` : num + 1
        }
      </p>
      <p className={"title"}>
        { title }
      </p>
      <p className={"icon"}>
          {isOpen ? '-' : '+'}
      </p>

        {
            isOpen &&
            <div className={"content-box"}>
                {
                    children
                }
            </div>
        }


    </div>
  );
}

export default App;
